<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view" style="overflow: auto">
			<div class="main">
				<!-- <div class="top-wrap">
					<div class="Bread-nav" v-if="industryQueryList.length > 0">当前查询产业：{{ industryListLabel }}</div>
					<div class="Bread-nav" v-else>当前查询产业：未限定</div>
				</div> -->
				<queryNav @change="handleQueryNav"></queryNav>
				<div style="margin-top: 30px">
					<tableMain ref="tableMainRef" :queryForm="state.queryForm" :paginations="{size:20}"></tableMain>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="queryList">
// 引入组件
const queryNav = defineAsyncComponent(() => import('./components/queryNav.vue'));

const tableMain = defineAsyncComponent(() => import('/@/components/tableMain/index.vue'));


const state = reactive<any>({
	queryForm: {
		industryId: '1', //产业

		agencyType: '', // 机构类型
		country: '', // 国家
		province: '', //省份
		city: '', // 城市
		awardFlag: '', // 奖项
		patType: '', // 专利类型
	},
});


// 处理搜索
function handleQueryNav(val: any) {
	state.queryForm.agencyType = val.agencyType;
	state.queryForm.province = val.province;
	state.queryForm.city = val.city;
	state.queryForm.awardFlag = val.awardFlag;
	state.queryForm.patType = val.patType;
	state.queryForm.country = val.country;
	state.queryForm.industryId = val.industry;
}

onMounted(() => {});
</script>
<style lang="scss" scoped>
.main {
	padding: 20px;
	.top-wrap {
		display: flex;
		flex-direction: row-reverse;
		.Bread-nav {
			font-size: 16px;
			color: #575757;
		}
	}
}
.tab-head {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	.num {
		margin-right: 10px;
	}
}
</style>
